<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父向子通信</title>
    <script type="text/javascript" src="../lib/vue/dist/vue.js"></script>
</head>

<style>


    .main{

        width: 100%;
        background-color: #8b8b8b;

    }

    .head{

        width: 100%;
        height: 100px;
        background-color: yellow;

    }


    .main2{

        width: 100%;
        height: 1000px;

    }


    .Vleft{

        background-color: #8cebff;
        float: left;
        width: 30%;
        height: 100%;

    }


    .Vright{

        background-color: red;
        float: left;
        width: 70%;
        height: 100%;

    }


</style>

<body>


<div id="app"></div>

<script>



    Vue.component("Vbtn", {

        template:'<button>我是一个全局按钮</button>'


    });

    var Vright = {


        template:`<div class="Vright">我是内容

          <ul>
\t\t\t\t\t\t<li v-for = '(item,index) in posts'>
\t\t\t\t\t\t\t<h3>{{item.title}}</h3>
\t\t\t\t\t\t\t<h4>{{item.content}}</h4>
\t\t\t\t\t\t</li>

\t\t\t\t\t</ul>

           </div>`,

        props:['posts']

    };


    var Vleft = {

        template:'<div class="Vleft">我是侧边栏</div>'

    };


    var  Vheader = {

        template:'<div class="head">我是头部导航栏,啦啦啦 <Vbtn/> </div>'


    };




    //程序入口
    var VMian = {

        template: `<div class="main">
        <Vheader />
        <div class="main2">
        <Vleft />
       <Vright  :posts = 'posts'/>
        </div>
         </div>`,
        components:{
            Vheader,
            Vleft,
            Vright

        },
        data:function () {
            return{

                posts:[
                    {id:1,title:"我的第一篇博客",content:'天王该帝王'},
                    {id:2,title:"我的第二篇博客",content:'小鸡炖蘑菇'},
                    {id:3,title:"我的第三篇博客",content:'宝塔镇河妖'}

                ]


            }
        }

    }


    new Vue({

        el:"#app",
        template:'<VMian />',
        data:function () {
            return{


            }
        },
        components: {
            VMian

        }
    });


</script>





</body>
</html>